<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@empty($post) Blog @else {{ $post->title }} @endempty</title>
    <meta name="keyword" content="vue,webpack,blog,laravel,markdown">
    <meta name="description" content="@empty($post)   @else {{ $post->description }} @endempty">
    <link rel="stylesheet" href="/static/css/layouts/pure-min.css">
        <!--[if lte IE 8]>
            <link rel="stylesheet" href="/static/css/layouts/email-old-ie.css">
        <![endif]-->
        <!--[if gt IE 8]><!-->
            <link rel="stylesheet" href="/static/css/layouts/email.css">
        <!--<![endif]-->
</head>
<body>

<div id="layout" class="content pure-g">
    <div id="nav" class="pure-u">
        <a href="#" class="nav-menu-button">Menu</a>

        <div class="nav-inner">
            <a class="primary-button pure-button" href="/writer#/">写文章</a>

            <div class="pure-menu">
                <ul class="pure-menu-list">
                    @guest

                    @else
                    <li class="pure-menu-item"><a class="pure-menu-link" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }} <span class="email-count">({{ Auth::user()->name }})</span>
                                    </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                        @csrf
                                    </form></li>                    
                    @endguest
                    <li class="pure-menu-heading">Category</li>
                    @isset($categories)
                         @foreach ($categories as $cat_item)
                            <li class="pure-menu-item"><a href="?cat={{ $cat_item->id }}" class="pure-menu-link">{{ $cat_item->name }}</a></li>
                        @endforeach
                    @endisset
                </ul>
            </div>
        </div>
    </div>

    <div id="list" class="pure-u-1">

        @foreach ($posts as $item)
        <div class="email-item @if($loop->index%2==1) email-item-selected @else email-item-unread @endif pure-g">
            <div class="pure-u-1">                
                <h4 class="email-subject"><a href="?id={{$item->id}}">{{ $item->title }}</a></h4>
                <p class="email-desc">
                    {{ $item->description }}
                </p>
                <h5 class="email-name">{{ $item->category->name }}</h5>
            </div>
        </div>
        @endforeach

        
    @isset($cat)
        {{ $posts->appends(['cat' => $cat ])->links('vendor.pagination.bootstrap-4') }}
    @else
        {{ $posts->links('vendor.pagination.bootstrap-4') }}
    @endisset
    </div>

    <div id="main" class="pure-u-1">
        @empty($post)
        @else
        <div class="email-content">
            <div class="email-content-header pure-g">
                <div class="pure-u-1">
                    <h1 class="email-content-title">{{ $post->title }}</h1>
                    <p class="email-content-subtitle">
                        <a>{{ $post->user->name }}</a> 发布于 <span>{{ $post->category->name }}</span> 更新日期: <span>{{ $post->updated_at }}</span>  


                        @auth  
                          @if(Auth::user()->id==$post->user->id)
                            <a href="/writer#/article/{{$post->id}}">编辑</a>  
                          @endif
                        @endauth  
                    </p>
                </div>

              
            </div>

            <div class="email-content-body">
                {!! $post->html !!}
            </div>
        </div>
        @endempty
    </div>
</div>
<script src="https://cdn.bootcss.com/yui/3.18.1/yui/yui-min.js"></script>
<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/github.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script>
    hljs.initHighlightingOnLoad();
    YUI().use('node-base', 'node-event-delegate', function (Y) {

        var menuButton = Y.one('.nav-menu-button'),
            nav        = Y.one('#nav');

        // Setting the active class name expands the menu vertically on small screens.
        menuButton.on('click', function (e) {
            nav.toggleClass('active');
        });

        // Your application code goes here...

    });
</script>




</body>
</html>